<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool>
        <template #before>
          <el-row>
            <el-button type="primary" size="small" @click="ShowDialog">添加客户</el-button>
          </el-row>
        </template>
        <template #after>
          <el-select v-model="agent" class="select" placeholder="全部经纪" @change="changeAgent(agent)">
            <el-option :value="''">全部经纪</el-option>
            <el-option
              v-for="item in agentData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-row type="flex" justify="end">

            <el-input v-model="People" class="search" placeholder="请输入关键字">
              <i slot="suffix" class="el-input__icon el-icon-lollipop" @click="findPeople(People)" />
            </el-input>
            <el-button size="small" @click="findTwo(agent,People)">筛选</el-button>
          </el-row>
        </template>
      </PageTool>
      <el-card class="cardBox">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="image"
              label="图片"
              width="180"
            >
              <template v-slot="{row}">
                <div>
                  <el-avatar v-imgErr="require('@/assets/common/img.jpeg')" :src="row.image" />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              label="电话"
            />
            <el-table-column
              prop="agent.name"
              label="经纪"
            /> <el-table-column
              prop="wechat"
              label="微信"
            />
            <el-table-column
              prop="desc"
              label="介绍"
            />
            <el-table-column
              width="150px"
              prop="id"
              label="操作"
            >
              <template v-slot="{row}">
                <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
        <el-row type="flex" justify="center">
          <el-pagination
            background
            :page-size="size"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
          <!-- <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          /> -->
        </el-row>
      </el-card>
      <ClientsDialog ref="ClientsDialog" :is-show.sync="showDialog" :agent-list.sync="agentData" @updateEvent="getClientsList" />
    </div>
  </div>
</template>

<script>
import ClientsDialog from '@/views/clients/components/clientsDialog.vue'
import { getClients, getAgents, delClients, getClientsByName } from '@/api/clients/index'
export default {
  components: { ClientsDialog },
  data() {
    return {
      tableData: [
        // {
        //   image: '',
        //   name: '',
        //   email: '',
        //   phone: '',
        //   agent: '',
        //   wechat: '',
        //   desc: ''
        // }

      ],
      agent: '',
      showDialog: false,
      agentData: [],
      formId: {},
      total: 0,
      size: 4,
      People: ''
    }
  },
  computed: {

  },
  async created() {
    const res = await getClients()
    console.log(128, res)
    this.total = res.data.length

    this.getClientsList()
  },
  methods: {
    async  findTwo(agent, People) {
      if (agent === '' && People === '') {
        this.getClientsList()
      } else if (agent !== '' && People === '') {
        const res = await getClientsByName({ agent })
        console.log(res)
        this.tableData = res.data
      } else if (agent === '' && People !== '') {
        const res = await getClients({ name_contains: People })
        this.tableData = res.data
      } else {
        const res = await getClients({ agent, name_contains: People })
        this.tableData = res.data
      }
    },
    // 模糊搜索
    async findPeople(People) {
      if (People === '') {
        this.getClientsList()
      } else {
        const res = await getClients({ name_contains: People })
        this.tableData = res.data
      }
    },
    // 分页器
    async currentChange(page) {
      const res = await getClients({ _limit: this.size, _start: (page - 1) * this.size })
      this.tableData = res.data
    },
    // 下拉列表筛选
    async  changeAgent(agent) {
      if (agent === '') {
        this.getClientsList()
      } else {
        const res = await getClientsByName({ agent })
        console.log(res)
        this.tableData = res.data
      }
    },
    // 渲染初始列表
    async getClientsList() {
      const res = await getClients({ _limit: this.size })
      console.log(res)
      // this.total = res.data.length
      this.tableData = res.data
      const res2 = await getAgents()
      // console.log(res2)
      this.agentData = res2.data
      // this.tableData.agent = res2.data
    },
    // 弹窗
    ShowDialog() {
      this.showDialog = true
    },
    // 编辑
    async editFn(id) {
      this.showDialog = true
      this.$refs.ClientsDialog.getClientsById(id)
    },
    // 删除
    delFn(id) {
    // console.log(120, id)
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delClients(id)
        this.getClientsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-input__inner {
  width: 260px;
  position: relative;

}
.el-icon-lollipop:before {
    font-size: 20px;
}
.select{
  width: 150px;
}
.cardBox{
  margin-top: 1px;
}
.el-avatar--circle {
    border-radius: 50%;
    width: 130px;
    height: 130px;
}
</style>
